import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Modal, Card, Tabs, Row, Table, Avatar } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { setNote, getOrderInfoForOn, getOrderInfoForOff, getOrderInfoForAfter, auditPass, auditNoPass } from '@/services/order/orderDetail'
import order from '../distribution/order'

const { TabPane } = Tabs

const { TextArea } = Input
// 表头
const payColumns = [
  {
    title: '支付订单号',
    dataIndex: 'payOrderNo',
    key: 'payOrderNo',
    align: 'center'
  },
  {
    title: '第三方订单号',
    dataIndex: 'thirdOrderNo',
    key: 'thirdOrderNo',
    align: 'center'
  },
  {
    title: '支付机构订单号',
    dataIndex: 'platOrderNo',
    key: 'platOrderNo',
    align: 'center'
  },
  {
    title: '支付pos',
    dataIndex: 'posSn',
    key: 'posSn',
    align: 'center'
  },
  {
    title: '支付方式',
    dataIndex: 'payTypeName',
    key: 'payTypeName',
    align: 'center'
  },
  {
    title: '支付状态',
    dataIndex: 'payStatusName',
    key: 'payStatusName',
    align: 'center'
  },
  {
    title: '支付状态',
    dataIndex: 'payAmount',
    key: 'payAmount',
    align: 'center'
  },
  {
    title: '优惠金额',
    dataIndex: 'payCoupon',
    key: 'payCoupon',
    align: 'center'
  },
  {
    title: '支付时间',
    dataIndex: 'payTime',
    key: 'payTime',
    align: 'center'
  },
  {
    title: '银行卡类型',
    dataIndex: 'cardType',
    key: 'cardType',
    align: 'center'
  }
]
const productColumns = [
  {
    title: '商品信息',
    dataIndex: 'goodsName',
    key: 'goodsName',
    align: 'center'
  },
  {
    title: '商品LOGO',
    dataIndex: 'goodsImage',
    key: 'goodsImage',
    align: 'center',
    render: logo => <Avatar shape="square" size="large" src={logo} />
  },
  {
    title: '是否分销商品',
    dataIndex: 'isDistributionGoods',
    key: 'isDistributionGoods',
    align: 'center',
    render: isDistributionGoods => <span>{isDistributionGoods === '1' ? '否' : '是'}</span>
  },
  {
    title: '单价',
    dataIndex: 'goodsPrice',
    key: 'goodsPrice',
    align: 'center'
  },
  {
    title: '数量',
    dataIndex: 'goodsNums',
    key: 'goodsNums',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'payStatusName',
    key: 'payStatusName',
    align: 'center'
  },
  {
    title: '涨价或优惠',
    dataIndex: 'goodsCoupon',
    key: 'goodsCoupon',
    align: 'center'
  },
  {
    title: '小计',
    dataIndex: 'goodsAmountDue',
    key: 'goodsAmountDue',
    align: 'center'
  }
]
const groupColumns = [
  {
    title: '用户名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  },
  {
    title: '用户头像',
    dataIndex: 'headImg',
    key: 'headImg',
    align: 'center'
  },
  {
    title: '支付状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center'
  },
  {
    title: '支付金额',
    dataIndex: 'payNum',
    key: 'payNum',
    align: 'center'
  },
  {
    title: '支付方式',
    dataIndex: 'payType',
    key: 'payType',
    align: 'center'
  },
]

const OrderDetail = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [orderNo, setOrderNo] = useState('')
  const [orderType, setOrderType] = useState('')
  const [visible, setVisible] = useState(false)
  const [orderInfo, setOrderInfo] = useState({})
  const [isPass, setIsPass] = useState(true)

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    let type = props.location.query.orderType
    let No = props.location.query.orderNo
    setOrderType(type)
    setOrderNo(No)
    getOrderInfos(No, type)
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 返回按钮
  const goBack = () => {
    props.history.goBack(-1)
  }
  // 修改批注
  const setNotes = async (orderMemo) => {
    let params = {
      orderMemo,
      orderNo
    }
    let res = await setNote(params)
    if (res.code === '0') {
      alert(res.msg)
    } else {
      alert(res.msg)
    }
  }
  // 操控弹出层
  const handleModel = async (flag) => {
    setVisible(!visible)
    setIsPass(flag)
  }
  const handleOk = async () => {
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      switch (orderType) {
        case 'online':
          setNotes(values.orderMemo)
          break
        case 'offline':
          setNotes(values.orderMemo)
          break
        case 'afterSale':
          if (isPass) {
            auditPasss(values.orderMemo)
          } else {
            auditNoPasss(values.orderMemo)
          }
          break
      }
    })
    handleModel()
  }
  // 获取订单信息
  const getOrderInfos = async (orderNo, orderType) => {
    let params = {
      orderNo
    }
    let res = {}
    switch (orderType) {
      case 'online':
        res = await getOrderInfoForOn(params)
        break
      case 'offline':
        res = await getOrderInfoForOff(params)
        break
      case 'afterSale':
        params = {
          applyNo: orderNo
        }
        res = await getOrderInfoForAfter(params)
        break
      default:
        res = await getOrderInfoForOn(params)
        break
    }
    if (res.code === '0') {
      setOrderInfo(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 通过审批
  const auditPasss = async (auditDesc) => {
    let params = {
      auditDesc,
      applyNo: orderNo,
      price: orderInfo.refundAmount
    }
    let res = await auditPass(params)
    if (res.code === '0') {
      alert(res.msg)
    } else {
      alert(res.msg)
    }
  }
  // 拒绝审批
  const auditNoPasss = async (auditDesc) => {
    let params = {
      auditDesc,
      applyNo: orderNo
    }
    let res = await auditNoPass(params)
    if (res.code === '0') {
      alert(res.msg)
    } else {
      alert(res.msg)
    }
  }

  return (
    <PageHeaderWrapper title="订单详情">
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Button type="primary" onClick={goBack} style={{ margin: '0 12px 12px 0' }}>返回</Button>
      {
        (orderType === 'online' || orderType === 'offline') ?
          <Button type="primary" onClick={handleModel}>修改备注</Button>
        : ''
      }
      <Modal
        title="修改批注"
        visible={visible}
        onOk={handleOk}
        onCancel={handleModel}
      >
        <Form.Item>
          {getFieldDecorator(`orderMemo`, {})
            (<TextArea rows={4} />)}
        </Form.Item>
      </Modal>
      {
        orderInfo.payStatusName ?
        <Card title={`订单号：${orderNo} 订单状态：${orderInfo.payStatusName}`}>
          <Col span={8}>商户名称：{orderInfo.supplierName}</Col>
          <Col span={8}>门店名称：{orderInfo.storeName}</Col>
          <Col span={8}>订单类型：{orderInfo.orderTypeName}</Col>
          <Col span={8}>支付场景：{orderInfo.orderPaySceneName}</Col>
          <Col span={8}>平台来源：{orderInfo.platFormName}</Col>
          <Col span={8}>支付状态：{orderInfo.payStatusName}</Col>
          <Col span={8}>支付类型：{orderInfo.payTypeName}</Col>
          <Col span={8}>支付时间：{orderInfo.payTime}</Col>
          <Col span={8}>分销订单：{orderInfo.discountType === '' ? '否' : '是'}</Col>
          <Col span={8}>订单类目：{orderInfo.orderTypeName}</Col>
          <Col span={8}>员工编号：{orderInfo.employeeNo}</Col>
          <Col span={8}>员工名称：{orderInfo.employeeName}</Col>
          <Col span={8}>系统类型：{orderInfo.osTypeName}</Col>
          <Col span={8}>支付标记：{orderInfo.tradeTypeName}</Col>
          <Col span={8}>pos名称：{orderInfo.posName}</Col>
          <Col span={8}>posSn：{orderInfo.posSn}</Col>
          <Col span={8}>用户名称：{orderInfo.userName}</Col>
          <Col span={8}>用户手机：{orderInfo.userPhone}</Col>
          <Col span={8}>请求IP：{orderInfo.requestIp}</Col>
          <Col span={8}>下单时间：{orderInfo.orderTime}</Col>
          <Col span={8}>订单原价：{orderInfo.originalPrice}</Col>
          <Col span={8}>优惠金额：{orderInfo.transFee}</Col>
          <Col span={8}>实付金额：{orderInfo.actualPrice}</Col>
          <Col span={8}>订单备注：{orderInfo.orderMemo}</Col>
        </Card>
        : ''
      }
      {
        orderInfo.amdOrderAddressInfo ?
        <Card>
          <Tabs defaultActiveKey="1">
            <TabPane tab="买家信息" key="1">
              <Row gutter={24}>
                <Col span={8}>姓名：{orderInfo.userName}</Col>
                <Col span={8}>手机号：{orderInfo.userPhone}</Col>
                <Col span={8}>用户名：{orderInfo.userName}</Col>
                <Col span={8}>付款方式：</Col>
                <Col span={8}>微信昵称：</Col>
                <Col span={8}>所在地区：</Col>
                <Col span={8}>订单渠道：</Col>
                <Col span={8}>买家留言：</Col>
              </Row>
            </TabPane>
            <TabPane tab="收货和物流信息" key="2">
              <Col>收货地址：{orderInfo.amdOrderAddressInfo.address}</Col>
              <Col>配送方式：{orderInfo.amdOrderAddressInfo.addressType}</Col>
              <Col>物流单号：{orderInfo.amdOrderAddressInfo.orderNo}</Col>
              <Col>物流跟踪：<Button type="primary">手动刷新物流信息</Button></Col>
            </TabPane>
          </Tabs>
        </Card>
        : ''
      }
      {
        <Card title="拼团信息">
          <Row gutter={24}>
            <Col span={4}>拼团活动名称：</Col>
            <Col span={4}>拼团状态：</Col>
            <Col span={4}>团长：</Col>
            <Col span={4}>拼团设置人数：</Col>
            <Col span={4}>已拼人数：</Col>
          </Row>
          <Table
            columns={groupColumns}
            dataSource={[]}
            rowKey={record => record.orderNo}
          />
        </Card>
      }
      {
        orderInfo.amdPaymentInfoList ?
        <Card title="支付信息">
          <Table
            columns={payColumns}
            dataSource={orderInfo.amdPaymentInfoList}
            rowKey={record => record.orderNo}
          />
        </Card>
        : ''
      }
      {
        orderInfo.amdOrderDetailInfoList ?
        <Card title="商品信息">
          <Table
            columns={productColumns}
            dataSource={orderInfo.amdOrderDetailInfoList}
            rowKey={record => record.id}
          />
        </Card>
        : ''
      }
      {
        orderInfo.amdOrderAddressInfo ?
        <Card title="收货信息">
          <Col span={24}>收货地址：{orderInfo.amdOrderAddressInfo.address + ' ' + orderInfo.amdOrderAddressInfo.contactName + ' ' +  orderInfo.amdOrderAddressInfo.contactPhone }</Col>
          <Col span={24}>配送方式：{orderInfo.amdOrderAddressInfo.addressType}</Col>
        </Card>
        : ''
      }
      {
        orderInfo.amdOrderDetailInfo ?
        <>
          <Card title={`审核信息  申请单号：${orderInfo.applyNo}`}>
            <Row>
              <Col span={4}>
                商品图片：
                <Avatar shape="square" size="large" src={orderInfo.amdOrderDetailInfo.goodsImage} />
              </Col>
              <Col span={4}>商品名字：{orderInfo.amdOrderDetailInfo.goodsName}</Col>
            </Row>
            <Row>
              <Col span={4}>售后类型：{orderInfo.refundTypeName}</Col>
              <Col span={4}>退款金额：{orderInfo.refundAmount}</Col>
              <Col span={4}>售后原因：{orderInfo.refundReason}</Col>
            </Row>
            <Row>{
              orderInfo.auditStatusName === '审核通过' ?
              <>
                <Col span={8}>审批结果：{orderInfo.auditStatusName}</Col>
                <Col span={8}>审批时间：{orderInfo.auditTime}</Col>
                <Col span={8}>审批备注：{orderInfo.auditDesc}</Col>
              </>
              :
              <>
                <Button type="primary" style={{marginRight: '12px'}} onClick={() => handleModel(true)}>待审核</Button>
                <Button type="danger" onClick={() => handleModel(false)}>拒绝退款</Button>
              </>
            }</Row>
          </Card>
          <Modal
            title="售后审批"
            visible={visible}
            onOk={handleOk}
            onCancel={handleModel}
          >
            <Form.Item label="退款金额" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator(`price`, {})
                (<Input placeholder={orderInfo.refundAmount} disabled />)}
            </Form.Item>
            <Form.Item label="备注" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator(`orderMemo`, {})
                (<TextArea rows={4} />)}
            </Form.Item>
          </Modal>
        </>
        : ''
      }
    </PageHeaderWrapper>
  )
}

export default Form.create()(OrderDetail)
